<template>
  <el-dialog
    id="displgid1"
    :visible.sync="modalVisible"
    v-if="modalVisible"
    :title="title"
    :append-to-body="true"
    :z-index="100"
    centered
    @close="$emit('closepopup')"
    :before-close="handleClose" 
    :close-on-click-modal="false"
  >
    <slot />
  </el-dialog>
</template>

<script>
export default {
  props: {
    // modal是否可见
    modalVisible: {
      type: Boolean,
      default: false,
    },
    title: String,
  },
  data() {
    return {};
  },
  created() {
    console.log(
      window.devicePixelRatio,
      document.getElementById("displgid1"),
      2222
    );
    // if (window.devicePixelRatio > 1.2) {
    //   document.getElementById("displgid1").style.zoom = (
    //     (1 / window.devicePixelRatio) * 0.9 +
    //     0.3
    //   ).toFixed(2);
    //   // document.getElementById("displgid").style.transform = "scale("+ 1 / window.devicePixelRatio +")";
    //   document.body.style.fontSize = "20px";
    // }
  },
  methods: {
    onConfirm() {
      this.$emit("bulkImport");
    },
    closeModal() {
      this.$emit("closepopup");
    },
    handleClose() {
      this.$parent.closepopup();
      // this.$emit("closepopup");
    },
  },
  watch: {},
  computed: {},
  components: {},
  mounted() {},
};
</script>

<style scoped>
.el-dialog__wrapper {
  backdrop-filter: blur(0.05rem);
  height: 100%;
}
/deep/ .el-dialog {
  width: 85%;
  height: 90%;
  margin: 0 auto;
  margin-top: 3% !important;
  display: flex;
  flex-direction: column;
  background-image: url("~@/assets/bottombg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: rgb(0, 38, 141, 0) !important;
  border: none;
  box-shadow: none;
  padding: 0.5% 1.2%;
  box-sizing: border-box;
  overflow: hidden;
  font-family: JCYT;
}
/deep/ .el-dialog__footer {
  position: absolute;
  bottom: 0;
  right: 0;
}
/deep/ .el-dialog__title {
  font-size: 1rem;
  color: #182c56;
  border-bottom: 0.05rem solid #182c56;
}
/deep/ .el-dialog__body {
  height: 100%;
  overflow: hidden;
  flex: 1;
  padding: 0px;
  color: #192c55;
}
/deep/ .el-dialog__close {
  width: 1.1rem;
  height: 1.1rem;
  background: url("~@/assets/backtopszjy.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
}
/deep/ .el-dialog__close:before {
  content: "替";
  visibility: hidden;
}
/deep/ .el-dialog__headerbtn {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #192c55;
  border-radius: 50%;
}
</style>
